<template>
  <!-- 奖扣任务页 -->
  <div class="box">
    <div class="integral_top">
      <span class="left">{{data_time}}</span>
      <span
        class="right"
        style="width:20px;display:inline-block"
        @click="showTime"
      >
        <img
          style="width:100%"
          src="@/static/img/icon/日历.png"
        >
      </span>
    </div>
    <!-- 时间 -->
    <van-popup
      v-model="time"
      :safe-area-inset-bottom="true"
      :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
      :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="getTime"
        @cancel="showEnd"
      />

    </van-popup>
    <van-row>
      <h4>任务指标</h4>
      <p style="margin:0px;padding:0px">
        <span>奖分：</span><span v-if='list!=""'>{{list.limit_reward_code}}/月</span><span v-else>0/月</span>
        <span style="margin-left:15px">奖扣人次：</span><span v-if='list!=""'>{{list.person_time}}/月</span><span v-else>0/月</span><br />
        <span>扣分比例：</span><span v-if='list!=""'>{{list.deduction_ratio}}</span><span v-else>0 </span>
      </p>
    </van-row>
    <van-row>
      <h4>奖分任务：<span v-if="list==''">0</span><span v-else>{{list.limit_reward_code}}</span></h4>
      <table>
        <tr>
          <td>月度奖分：</td>
          <td><span v-if="list==''">0</span><span v-else>{{list.actual_reward_code}}</span></td>
        </tr>
        <tr>
          <td>完成比例：</td>
          <td><span v-if="list==''">0</span><span v-else>{{proportion_one}}%</span></td>
        </tr>
        <tr>
          <td>未完成扣分：</td>
          <td v-if="list.actual_reward_code<1000">{{list.reward_deduction}}</td>
          <td v-else>0</td>
        </tr>
      </table>
    </van-row>
    <van-row>
      <h4>扣分任务：<span v-if="list==''">0</span><span v-else>{{list.limit_deduction_code}}</span></h4>
      <table>
        <tr>
          <td>月度扣分：</td>
          <td><span v-if="list==''">0</span><span v-else>{{list.actual_deduction_code}}</span></td>
        </tr>
        <tr>
          <td>完成比例：</td>
          <td> <span v-if="list==''">0</span><span v-else>{{proportion_two}}%</span></td>
        </tr>
        <tr>
          <td>未完成扣分：</td>
          <td><span v-if="list==''">0</span><span v-else>{{list.subtraction}}</span></td>
        </tr>
      </table>
    </van-row>
    <van-row>
      <h4>奖励人次：<span v-if="list==''">0</span><span v-else>{{list.person_time}}</span></h4>
      <table>
        <tr>
          <td>月度人次：</td>
          <td><span v-if="list==''">0</span><span v-else>{{list.actual_person_time}}</span></td>
        </tr>
        <tr>
          <td>完成比例：</td>
          <td><span v-if="list==''">0</span><span v-else>{{proportion_three}}%</span></td>
        </tr>
        <tr>
          <td>未完成扣分：</td>
          <td v-if="list.actual_person_time<list.person_time">{{list.actual_deduction_person_time}}</td>
          <td v-else>0</td>
        </tr>
      </table>
    </van-row>
    <van-row :style="{borderBottom:'0px',paddingBottom:'20px'}">
      <h4>任务扣分：<span v-if="list==''">0</span><span v-else>{{list.total_deduction}}</span></h4>
    </van-row>
  </div>
</template>

<script type="text/javascript">
import { Row, DatetimePicker, Popup } from "vant";
export default {
  data() {
    return {
      list: {},
      number: [],
      proportion_one: 0,
      proportion_two: 0,
      proportion_three: 0,
      data_time: "",
      time: false,
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date()
    };
  },
  components: {
    [Row.name]: Row,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup
  },
  created() {
    this.dataTime();
    dd.biz.navigation.setTitle({
      title: "奖扣任务" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    showEnd() {
      this.time = false;
      this.currentDate = new Date();
      this.dataTime();
    },
    showTime() {
      this.time = true;
    },
    // 事件
    getTime(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = d.getFullYear() + "-" + this.p(d.getMonth() + 1);
      this.data_time = resDate;
      this.awardDeductionTask(resDate);
      this.time = false;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.awardDeductionTask(year);
      this.data_time = year;
    },
    async awardDeductionTask(year) {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/awardDeductionTask?corpId=${corpId}&userId=${userId}&date=${year}`
      );
      const { data, errcode } = res.data;
      if (errcode == "1005") {
        this.list = 0;
      } else {
        this.list = data;
      }
      if (data.limit_reward_code == 0 || data.actual_reward_code == 0) {
        this.proportion_one = 0;
      } else {
        this.proportion_one = 
          parseFloat(data.actual_reward_code / data.limit_reward_code).toFixed(
            2
          ) * 100;
      }
      if (data.actual_deduction_code == 0 || data.limit_deduction_code == 0) {
        this.proportion_two = 0;
      } else {
        this.proportion_two =
          parseFloat(
            data.actual_deduction_code / data.limit_deduction_code
          ).toFixed(2) * 100;
      }
      if (data.actual_person_time == 0 || data.person_time == 0) {
        this.proportion_three = 0;
      } else {
        this.proportion_three =
          parseFloat(data.actual_person_time / data.person_time).toFixed(2) *
          100;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  // text-align: left;
  h4 {
    padding: 0px;
    margin: 0px;
    text-align: left;
  }
  p {
    text-align: left;
  }
  table,
  tr,
  td {
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    width: 8rem;
    text-align: left;
  }
  /deep/ .van-row {
    background: #fff;
    padding: 15px 30px;
    border-bottom: 1px solid #e6e6e6;
  }
  .integral_top {
    font-size: 18px;
    padding: 0px 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #c0c0c059;
    color: #0072ffe0;
    background: #fff;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
</style>
